<template>
  <div v-permission="['home.newPersonalSettings.essentialInfor.see']">
    <base-search :title="t('keys.BasicInformation')" :isShowSearch="1"> </base-search>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" label-position="left">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="t('keys.avatar')" prop="username">
            <div class="headPortrait">{{ ruleForm.realName }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="t('keys.userType')" prop="userTypeCn">
            <el-input v-model="ruleForm.userTypeCn" disabled style="width: 100%" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="t('keys.user_code')" prop="username">
            <el-input v-model="ruleForm.username" disabled style="width: 100%" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="t('keys.user_full_name')" prop="realName">
            <el-input v-model="ruleForm.realName" :disabled="!isEdit" style="width: 100%" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="t('keys.gender')" prop="gender">
            <lov
              v-model="ruleForm.gender"
              :lovCode="'ZIAM.GENDER'"
              :disabled="!isEdit"
              @change="
                (val) => {
                  ruleForm.gender = val
                }
              "
            >
            </lov>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="8">
        <!-- 编辑 -->
        <el-button style="margin-left:120px;" type="info" v-if="!isEdit" @click="handelEdit">{{ t('keys.edit') }}</el-button>
        <div class="btnClass">
          <!-- 取消 -->
          <el-button type="info" v-if="isEdit" @click="handelCancel">{{ t('keys.cancel') }}</el-button>
          <!-- 确定 -->
          <el-button type="primary" :loading="btnLoading" @click="submitForm(ruleFormRef)" v-if="isEdit">{{ t('keys.ok') }}</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { ERR_OK } from 'config/statusCode'
import { getUserInfoApi, putUserInfoApi } from 'api/home'

const { t } = useI18n() // 中英文
const isEdit = ref(false)
const btnLoading = ref(false)
const ruleFormRef = ref()
const ruleFormCopy = ref({})
const ruleForm = ref({
  username: '', // 用户编码
  userType: '', // 用户类型
  userTypeCn: '',
  realName: '', // 用户姓名
  gender: '' // 用户性别:1:男 2:女 3未知
})
const rules = reactive({
  realName: [{ required: true, message: t('keys.Please_enter_the_employee_name'), trigger: 'blur' }]
})

// 获取用户信息
const getUserInfo = async () => {
  const { code, data } = await getUserInfoApi({}, JSON.parse(localStorage.getItem('userinfo'))['userId'])
  if (code === ERR_OK) {
    ruleForm.value = { ...data }
    ruleForm.value.gender = ruleForm.value.gender.toString()
  }
}

// 编辑
const handelEdit = () => {
  isEdit.value = !isEdit.value
  ruleFormCopy.value = JSON.parse(JSON.stringify(ruleForm.value))
}
//取消
const handelCancel = () => {
  isEdit.value = !isEdit.value
  ruleForm.value.realName = ruleFormCopy.value.realName
  ruleForm.value.gender = ruleFormCopy.value.gender
}
// 保存
const submitForm = async () => {
  if (!ruleFormRef) return
  const params = { ...ruleForm.value }
  const { code } = await putUserInfoApi(params, JSON.parse(localStorage.getItem('userinfo'))['userId'])
  if (code === ERR_OK) {
    ElMessage.success(t('keys.operation_succeeded'))
    isEdit.value = false
    getUserInfo()
  }
}

onMounted(() => {
  getUserInfo()
})
</script>
<style scoped lang="scss">
.demo-ruleForm {
  margin-top: 30px;
  margin-left: 20px;
}
.headPortrait {
  width: 60px;
  height: 60px;
  background: var(--el-color-primary-light-5);
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  color: #ffffff;
}
.btnClass {
  text-align: center;
}
</style>
